<template>
  <div class="publish-view" ref="publishEditRef">
    <div
    class="tinymce-box ruifox-content"
    id="tinymce-box"
    >
      <div class="article-toolbar"></div>
      <div class="right-form">
        <el-scrollbar>
          <div class="inner-form" v-for="(item,index) in articlesAdd" :key="index" v-show="isActiveAddNews == index">
            <div class="page-footer-icon page-left-top"></div>
            <div class="page-footer-icon page-right-top"></div>
            <el-form :model="item" ref="formRefs" :rules="addMsgRules">
              <el-form-item prop="title">
                <el-input
                class="input tit-input"
                v-model="item.title"
                placeholder="请在这里输入标题"
                :show-word-limit="showTitNum"
                maxlength="64"
                @focus="focusTit"
                @blur="blurTit"
                type="textarea"
                resize="none"
                :autosize="{minRows:1,maxRows:3}"
                ></el-input>
              </el-form-item>
              <div class="editor-box">
                <div class="content-publish">
                    <el-form-item prop="content" v-if="true">
                        <ArticleTinymceEditor v-model:modelValue="item.content" :minHeight="500" :editorName="index.toString()"/>
                    </el-form-item>
                </div>
              </div>
            </el-form>
            <div class="page-footer-icon page-left-bottom"></div>
            <div class="page-footer-icon page-right-bottom"></div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineProps, watch, defineExpose } from "vue";

  const showTitNum = ref(false)
  const focusTit = () => {
    showTitNum.value = true;
  }
  const blurTit = () => {
    showTitNum.value = false;
  }

  const props = defineProps({
    articlesAdd: {
      type: Array,
      default: null
    }
  })
  const isActiveAddNews = ref(0)
  const articlesAdd = ref(props.articlesAdd ? props.articlesAdd : [
    {title:'',
    content:'',
    thumb_url:'',
    author:'',
    digest:''}])
  const addMsgRules = {
    title:[
      { required: true, message: '请输入标题', trigger: 'blur' },
      { max: 64, message: '长度限制64个字符', trigger: 'blur' },
    ],
    content:[
      { required: true, message: '请输入正文', trigger: 'blur' }
    ],
  }
  watch(() => props.articlesAdd, (newVal) => {
    articlesAdd.value = newVal ? newVal : [{title:'', content:'', thumb_url:'', author:'', digest:''}]
  },{deep: true})

  const formRefs = ref()
  const getArticles = async () => {
    let flag = true
    // 表单验证
    if(!formRefs.value) return null
    for (let i = 0; i < formRefs.value.length; i++) {
      await formRefs.value[i].validate((valid) => {
        if (!valid) {
          isActiveAddNews.value = i
          flag = false;
        }

      })
      if(flag == false) {
        break;
      }
    }
    if(flag) {
      return articlesAdd.value
    }else{
      return false
    }
  }
  defineExpose({
    getArticles
  })

//textarea高度自适应

</script>

<style lang="scss">
.publish-view {
  /* display: flex;
  justify-content: space-between; */
  position: relative;
  display: flex;
  /* height: calc(100vh - 64px); */
  background-color: #f5f5f5;
  overflow: hidden;
  .side-menu {
    position: absolute;
    z-index: 10;
    left: 20px;
    margin-top: 70px;
    height:calc(100% - 130px);
    .side-wrapper {
      padding-right: 50px;
      margin: 0;
      position: relative;
      width: 310px;
      margin: auto;
      height: 100%;
      .appmsg {
        background-color: #ffffff;
        color: #666666;
        overflow: visible;
        margin-bottom: 0;
        border: none;
        position: relative;
        box-shadow: 0 0 8px 0 rgba(229, 229, 229, 0.5);
        .appmsg-preview {
          .appmsgItem {
            cursor: pointer;
            &.first_card_media {
              .appmsg-item {
                .card-container {
                  height: 176px;
                  position: relative;
                  .img {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    &:before {
                      content: "";
                      content: " ";
                      position: absolute;
                      left: 0;
                      right: 0;
                      top: 0;
                      bottom: 0;
                      background-color: rgba(0, 0, 0, 0.3);
                      z-index: 1;
                    }
                  }
                  .bottom-title {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    box-sizing: border-box;
                    padding: 15px;
                    display: flex;
                    justify-content: space-between;
                    z-index: 2;
                    width: 100%;
                    .tit {
                      @include textEllipsis(23px,2);
                      color:#fff;
                    }
                  }
                }
              }
            }
            &.sub_card_media {
              position: relative;
              &:before {
                content: "";
                width:calc(100% - 20px);
                position:absolute;
                bottom:0;
                left:10px;
                border-bottom:1px solid #eaeaea;
              }
              &:last-of-type:before {
                display: none;
              }
              .appmsg-item {
                position: relative;
                z-index: 1;
                .card-container {
                  padding: 12px;
                  height: 72px;
                  box-sizing:border-box;
                  display: flex;
                  justify-content: space-between;
                  align-items:center;
                  .img {
                    width: 48px;
                    height: 48px;
                    position: relative;
                    flex-shrink: 0;
                    &:before {
                      content: "";
                      content: " ";
                      position: absolute;
                      left: 0;
                      right: 0;
                      top: 0;
                      bottom: 0;
                      background-color: rgba(0, 0, 0, 0.3);
                    }
                  }
                  .bottom-title {
                    margin-right: 10px;
                    .tit {
                      @include textEllipsis(23px,2);
                    }
                  }
                }
              }
            }
            &.current {
              .appmsg-item {
                border: 2px solid var(--el-color-primary);
              }
            }
          }
        }
      }
      .add-appmsg-container {
        height: 90px;
        position: relative;
        margin-bottom: 0;
        border-radius: 0 0 5px 5px;
        background: #fff;
        border-top: 1px solid #EBEBEB;
        .add-btn {
          color: #9A9A9A;
          cursor: pointer;
          .add-word {
            display: inline-block;
            margin-left: 5px;
          }
        }
      }
    }
  }
  #tinymce-box {
    flex-grow: 1;
    max-height: calc(100vh - 250px);
    .article-toolbar {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      transition: all 0.4s;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      z-index: 11;
      background-color:#fff;
      border-top:1px solid #ccc;
      .tox-tinymce-inline .tox-editor-header {
        border: none;
        .tox-toolbar {
          /* justify-content: center; */
        }
      }
    }
    .right-form {
      height: calc(100% - 130px);
      padding-top: 100px;
      width: 100%;
      padding-bottom: 25px;
      .inner-form {
        margin: 0 auto;
        background-color: #fff;
        width: 700px;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(#000,0.1);
        position: relative;
        // left: 140px;
        .page-footer-icon {
          height: 20px;
          width: 20px;
          position: absolute;
        }
        .page-left-top {
          left: 20px;
          top: 20px;
          border-right: 1px solid $weightBar;
          border-bottom: 1px solid $weightBar;
        }
        .page-right-top {
          right: 20px;
          top: 20px;
          border-left: 1px solid $weightBar;
          border-bottom: 1px solid $weightBar;
        }
        .page-left-bottom {
          left: 20px;
          bottom: 20px;
          border-right: 1px solid $weightBar;
          border-top: 1px solid $weightBar;
        }
        .page-right-bottom {
          right: 20px;
          bottom: 20px;
          border-left: 1px solid $weightBar;
          border-top: 1px solid $weightBar;
        }
        .input {
          &.tit-input {
            .el-textarea__inner {
              font-size: 24px;
            }
          }
          .el-input__wrapper,.el-textarea__inner {
            box-shadow: unset;
          }
        }
        .editor-box {
          margin-bottom: 20px;
          .content-box {
            padding-bottom: 20px;
            border-bottom: 1px solid #ccc;
          }
          .tinymce-box {
            .mce-content-body{
              outline: none;
              overflow: hidden;
            }
          }
        }
        .cover-digest {
          h2 {
            font-weight: normal;
            margin-bottom: 20px;
            color:#000;
          }
          .inner-cover-digest {
            display: flex;
            align-items: flex-start;
          }
        }
      }
    }
  }
}
.el-popover.changemsg-popover {
  min-width: 30px;
  padding: 2px!important;
  border-radius: 99px!important;
  .tool-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
    .tool-btn {
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius:50%;
      text-align:center;
      line-height: 35px;
      &:hover {
        background-color: rgba(#ccc,0.5);
      }
    }
  }
}
.inner-form .editor-box .tinymce-box .mce-content-body{
  min-height: 300px;
}
</style>
